<template>
  <!-- 直接使用app-container作为根容器，无需额外包裹 -->
  <div class="app-container wxy-dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>毕业论文管理系统</h2>
      <p class="subtitle">个人毕业论文进度跟踪与管理</p>
    </div>

    <!-- 主内容区 -->
    <div class="dashboard-content">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-content">
          <!-- 学生基本信息卡片 -->
          <div class="student-info-card">
            <div class="info-header">
              <h3>个人信息</h3>
              <el-button
                type="primary"
                size="mini"
                @click="startEditingPersonalInfo"
                icon="el-icon-edit"
              >
                编辑
              </el-button>
            </div>

            <div class="info-body">
              <div class="info-avatar">
                <div class="avatar-placeholder">
                  <i class="el-icon-user"></i>
                </div>
              </div>
              <div class="info-details">
                <div class="info-item">
                  <span class="info-label">姓名:</span>
                  <span class="info-value">{{ personalInfo.name || '万新宇' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">学号:</span>
                  <span class="info-value">{{ personalInfo.studentId || '2022003' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">班级:</span>
                  <span class="info-value">大数据2班</span>
                </div>
                <div class="info-item">
                  <span class="info-label">指导老师:</span>
                  <span class="info-value">{{ personalInfo.teacher || '待分配' }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 论文进度统计 -->
          <div class="progress-stats">
            <h4>论文进度</h4>
            <div class="progress-item">
              <div class="progress-label">总体进度</div>
              <el-progress :percentage="overallProgress" status="primary" />
            </div>
            <div class="progress-item">
              <div class="progress-label">文献阅读</div>
              <el-progress :percentage="literatureProgress" status="success" />
            </div>
            <div class="progress-item">
              <div class="progress-label">实验设计</div>
              <el-progress :percentage="experimentProgress" status="warning" />
            </div>
            <div class="progress-item">
              <div class="progress-label">论文撰写</div>
              <el-progress :percentage="writingProgress" status="info" />
            </div>
          </div>

          <!-- 重要日期提醒 -->
          <div class="important-dates">
            <h4>重要日期</h4>
            <div class="date-item" v-for="(date, index) in importantDates" :key="index">
              <div class="date-label">{{ date.label }}</div>
              <div class="date-value">{{ date.date }}</div>
              <div class="date-status" :class="date.status">{{ date.statusText }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧主内容 -->
      <div class="main-content">
        <!-- 论文信息卡片 -->
        <div class="paper-info-card">
          <div class="card-header">
            <h3>论文基本信息</h3>
            <el-button type="primary" size="small" @click="editPaperInfo">
              <i class="el-icon-edit"></i> 编辑信息
            </el-button>
          </div>
          <div class="card-body">
            <div class="paper-info-grid">
              <div class="paper-info-item">
                <span class="paper-info-label">论文题目:</span>
                <span class="paper-info-value">{{ paperInfo.title || '基于深度学习的毕业论文自动评分系统研究' }}</span>
              </div>
              <div class="paper-info-item">
                <span class="paper-info-label">选题类型:</span>
                <span class="paper-info-value">{{ paperInfo.type || '研究型' }}</span>
              </div>
              <div class="paper-info-item">
                <span class="paper-info-label">研究方向:</span>
                <span class="paper-info-value">{{ paperInfo.direction || '人工智能' }}</span>
              </div>
              <div class="paper-info-item">
                <span class="paper-info-label">开题状态:</span>
                <span class="paper-info-value status-badge" :class="paperInfo.proposalStatus ? 'status-approved' : 'status-pending'">
                  {{ paperInfo.proposalStatus ? '已通过' : '待审核' }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近活动 -->
        <div class="recent-activities">
          <div class="card-header">
            <h3>最近活动</h3>
          </div>
          <div class="card-body">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in recentActivities"
                :key="index"
                :timestamp="activity.time"
                :type="activity.type"
                :icon="activity.icon"
              >
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-description">{{ activity.description }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

        <!-- 文献阅读统计 -->
        <div class="literature-stats">
          <div class="card-header">
            <h3>文献阅读情况</h3>
          </div>
          <div class="card-body">
            <div class="literature-stats-grid">
              <div class="stat-card">
                <div class="stat-number">{{ literatureStats.total }}</div>
                <div class="stat-label">总文献数</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">{{ literatureStats.completed }}</div>
                <div class="stat-label">已阅读</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">{{ literatureStats.important }}</div>
                <div class="stat-label">重要文献</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">{{ literatureStats.cited }}</div>
                <div class="stat-label">已引用</div>
              </div>
            </div>
            
            <!-- 文献类型分布 -->
            <div class="literature-type-chart">
              <h4>文献类型分布</h4>
              <el-row :gutter="10">
                <el-col :span="8" v-for="(type, index) in literatureTypes" :key="index">
                  <div class="type-item">
                    <div class="type-name">{{ type.name }}</div>
                    <el-progress 
                      :percentage="type.percentage" 
                      :color="type.color"
                      :show-text="false"
                    />
                    <div class="type-count">{{ type.count }}篇</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 待办任务 -->
        <div class="todo-tasks">
          <div class="card-header">
            <h3>论文相关任务</h3>
            <el-button type="success" size="small" @click="addTask">
              <i class="el-icon-plus"></i> 添加任务
            </el-button>
          </div>
          <div class="card-body">
            <el-table :data="tasks" stripe style="width: 100%">
              <el-table-column prop="name" label="任务名称" width="300"></el-table-column>
              <el-table-column prop="deadline" label="截止日期"></el-table-column>
              <el-table-column prop="priority" label="优先级">
                <template slot-scope="scope">
                  <el-tag :type="getPriorityType(scope.row.priority)">
                    {{ scope.row.priority }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-tag :type="getTaskStatusType(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="editTask(scope.row)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="deleteTask(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WXYDashboard',
  data() {
    return {
      isEditingPersonalInfo: false,
      personalInfo: {
        name: '万新宇',
        studentId: '2022003',
        teacher: '张教授'
      },
      editingPersonalInfo: {},
      paperInfo: {
        title: '基于深度学习的毕业论文自动评分系统研究',
        type: '研究型',
        direction: '人工智能',
        proposalStatus: true
      },
      // 进度统计
      overallProgress: 45,
      literatureProgress: 70,
      experimentProgress: 30,
      writingProgress: 20,
      // 重要日期
      importantDates: [
        {
          label: '开题报告提交',
          date: '2023-11-30',
          status: 'status-passed',
          statusText: '已通过'
        },
        {
          label: '中期检查',
          date: '2024-03-15',
          status: 'status-warning',
          statusText: '即将到来'
        },
        {
          label: '论文提交',
          date: '2024-05-20',
          status: 'status-normal',
          statusText: '未开始'
        },
        {
          label: '答辩日期',
          date: '2024-06-10',
          status: 'status-normal',
          statusText: '未开始'
        }
      ],
      // 最近活动
      recentActivities: [
        {
          title: '提交开题报告',
          description: '成功提交毕业论文开题报告',
          time: '2023-11-28 14:30',
          type: 'success',
          icon: 'el-icon-check'
        },
        {
          title: '文献阅读',
          description: '完成10篇相关领域核心文献阅读',
          time: '2023-12-15 10:20',
          type: 'primary',
          icon: 'el-icon-document'
        },
        {
          title: '实验设计讨论',
          description: '与指导老师讨论实验方案',
          time: '2024-01-10 16:00',
          type: 'info',
          icon: 'el-icon-chat-line-square'
        },
        {
          title: '数据收集',
          description: '完成实验数据初步收集工作',
          time: '2024-01-20 11:45',
          type: 'warning',
          icon: 'el-icon-data-line'
        }
      ],
      // 文献阅读统计
      literatureStats: {
        total: 35,
        completed: 25,
        important: 12,
        cited: 8
      },
      // 文献类型分布
      literatureTypes: [
        {
          name: '期刊论文',
          count: 18,
          percentage: 51,
          color: '#409EFF'
        },
        {
          name: '会议论文',
          count: 10,
          percentage: 29,
          color: '#67C23A'
        },
        {
          name: '学位论文',
          count: 7,
          percentage: 20,
          color: '#E6A23C'
        }
      ],
      // 任务列表
      tasks: [
        {
          id: 1,
          name: '完成文献综述撰写',
          deadline: '2024-02-28',
          priority: '高',
          status: '进行中'
        },
        {
          id: 2,
          name: '优化实验模型',
          deadline: '2024-03-10',
          priority: '中',
          status: '未开始'
        },
        {
          id: 3,
          name: '准备中期检查材料',
          deadline: '2024-03-15',
          priority: '高',
          status: '未开始'
        },
        {
          id: 4,
          name: '撰写实验结果分析',
          deadline: '2024-04-10',
          priority: '中',
          status: '未开始'
        }
      ]
    }
  },
  computed: {
    isDarkTheme() {
      return this.$store.state.settings.theme === 'dark'
    }
  },
  methods: {
    startEditingPersonalInfo() {
      this.isEditingPersonalInfo = true
      this.editingPersonalInfo = { ...this.personalInfo }
    },
    savePersonalInfo() {
      this.personalInfo = { ...this.editingPersonalInfo }
      this.isEditingPersonalInfo = false
      this.$message.success('个人信息保存成功')
    },
    cancelEditingPersonalInfo() {
      this.isEditingPersonalInfo = false
      this.editingPersonalInfo = {}
    },
    editPaperInfo() {
      // 打开论文信息编辑对话框
      this.$message.info('论文信息编辑功能待实现')
    },
    addTask() {
      // 打开添加任务对话框
      this.$message.info('添加任务功能待实现')
    },
    editTask(task) {
      // 打开任务编辑对话框
      this.$message.info('任务编辑功能待实现')
    },
    deleteTask(id) {
      this.$confirm('确定要删除这个任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tasks = this.tasks.filter(task => task.id !== id)
        this.$message.success('任务删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    getPriorityType(priority) {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      }
      return typeMap[priority] || 'default'
    },
    getTaskStatusType(status) {
      const typeMap = {
        '未开始': 'info',
        '进行中': 'primary',
        '已完成': 'success',
        '已逾期': 'danger'
      }
      return typeMap[status] || 'default'
    }
  }
}
</script>

<style scoped>
.wxy-dashboard {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
}

.subtitle {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.dashboard-content {
  display: flex;
  gap: 20px;
  padding: 0 20px 20px;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 学生信息卡片 */
.student-info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.info-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.info-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 40px;
}

.student-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-details {
  width: 100%;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.edit-input {
  width: 150px;
}

.info-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

/* 进度统计 */
.progress-stats {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-stats h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.progress-item {
  margin-bottom: 15px;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

/* 重要日期 */
.important-dates {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.important-dates h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.date-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.date-item:last-child {
  border-bottom: none;
}

.date-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.date-value {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.date-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.status-passed {
  background-color: #f0f9ff;
  color: #1890ff;
}

.status-warning {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-normal {
  background-color: #f5f5f5;
  color: #666;
}

/* 主内容区卡片 */
.paper-info-card,
.recent-activities,
.literature-stats,
.todo-tasks {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.card-body {
  padding: 20px;
}

/* 论文信息 */
.paper-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.paper-info-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.paper-info-item:last-child {
  border-bottom: none;
}

.paper-info-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.paper-info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.status-approved {
  background-color: #f0f9ff;
  color: #1890ff;
}

.status-pending {
  background-color: #fff7e6;
  color: #fa8c16;
}

/* 最近活动 */
.activity-content {
  padding: 5px 0;
}

.activity-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.activity-description {
  font-size: 14px;
  color: #666;
}

/* 文献统计 */
.literature-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.literature-type-chart {
  margin-top: 20px;
}

.literature-type-chart h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.type-item {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.type-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.type-count {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .paper-info-grid {
    grid-template-columns: 1fr;
  }
}
</style>